<template>
    <view v-if="Goodsdetaillist"  class="goods-detail">
        <u-swiper 
        :list="Goodsdetaillist.pics"
        name="pics_big"
        heigth="500"
        img-mode="aspectFit"
        @click="previewImage"
        ></u-swiper>
        <!-- 商品名称 -->
            <view class="goods_name">{{ Goodsdetaillist.goods_name }}</view>
        <!-- 商品价格 -->
            <view class="goods_price">{{ Goodsdetaillist.goods_price }}</view>
        <!-- 商品描述 -->
        <rich-text :nodes="Goodsdetaillist.goods_introduce">
            
        </rich-text>
          <!-- 购物车 -->
            
    <view class="navigation1">
        <view class="left">
            <view class="item">
                <u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
                <view class="text u-line-1">客服</view>
            </view>
            <view class="item">
                <u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
                <view class="text u-line-1">店铺</view>
            </view>
            <navigator class="item car" open-type="switchTab" url="/pages/car/car">
                <u-badge class="car-num"
                 :count="getCheckedNum" type="error"
                  :offset="[-3, -6]"
                  ></u-badge>
                <u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
                <view class="text u-line-1">购物车</view>
            </navigator>
        </view>
        <view class="right">
            <view class="cart btn u-line-1" @click="handleAddCart">加入购物车</view>
            <view class="buy btn u-line-1">立即购买</view>
        </view>
    </view>
    </view>
      
</template>
<script>
import { mapMutations ,mapGetters} from 'vuex'
// import { cart } from '../../store/modules/cart'
export default {
    data() {
        return {
            Goodsdetaillist:null,
          
    }
    },
    computed: {
        ...mapGetters('cart', ['getCheckedNum'])
   },
    onLoad(options) {
        // console.log(options);
        this.Goodsdetail(options.goods_id)
        // console.log(this.$store
    },
    methods: {
        ...mapMutations("cart", ["addCart"]),
        async Goodsdetail(goods_id) {
            const res = await this.$u.get("/goods/detail",{goods_id})
            // console.log(res);
            this.Goodsdetaillist = res.message;
        },
        previewImage(index) {
            // console.log(1);
            const urls = this.Goodsdetaillist.pics.map(v => v.pics_big)
            // const current=urls[index]
            uni.previewImage({ urls, current })
        },
        handleAddCart() {
            // console.log(this.addCart);
            this.addCart(this.Goodsdetaillist)
        }
    },
}
</script>
<style lang="scss" scoped>
.goods-detail {
    padding-bottom: 104rpx;
}
.navigation1 {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;

    display: flex;
    margin-top: 100rpx;
    border: solid 2rpx #f2f2f2;
    background-color: #ffffff;
    padding: 16rpx 0;

    .left {
        display: flex;
        font-size: 20rpx;

        .item {
            margin: 0 30rpx;

            &.car {
                text-align: center;
                position: relative;

                .car-num {
                    position: absolute;
                    top: -10rpx;
                    right: -10rpx;
                }
            }
        }
    }

    .right {
        display: flex;
        font-size: 28rpx;
        align-items: center;

        .btn {
            line-height: 66rpx;
            padding: 0 30rpx;
            border-radius: 36rpx;
            color: #ffffff;
        }

        .cart {
            background-color: #ed3f14;
            margin-right: 30rpx;
        }

        .buy {
            background-color: #ff7900;
        }
    }
}
</style>